<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <link type="text/css" href="Style.css" rel="stylesheet"></link>
  	<title>个人信息</title>
	<style>
	  h1{position:absolute;left:350px;top:220px;font-size:50;cursor:default;}
	  h2{cursor:default;}
	  div#infoButton{position:absolute;left:380px;top:370px;}
	  div#infoButton input#bt1{position:relative;bottom:25px;border:none;background:none;font-size:30;cursor:pointer}
	  div#infoButton input#bt2{position:relative;top:25px;border:none;background:none;font-size:30;cursor:pointer}
	  div#infoButton input#bt1:hover,input#bt1:active,input#bt2:hover,input#bt2:active{color:gray;}
	  div#jbxx{position:absolute;left:700px;top:300px;display:block;}
	  div#jbxx input#bt3,input#bt4{cursor:pointer;}
	  div#xgmm{position:absolute;left:700px;top:300px;display:none;}
	  div#xgmm input#bt5,input#bt6{cursor:pointer;}
	</style>
    <script type="text/javascript" src="js/inputnull.js"></script>
	<script>
	  function clickJBXXbutton(){
	    document.getElementById("jbxx").style.display="block";
		document.getElementById("xgmm").style.display="none";
	  }
	  function clickXGMMbutton(){
	    document.getElementById("jbxx").style.display="none";
		document.getElementById("xgmm").style.display="block";
	  }
	</script>
  </head>
  <body>
    <ul id="nav">        <!--导航条-->
	  <li><a href="myOrder.html">我的订单 </a></li>
	  <li><a href="recycle.html">申请回收 </a></li>
	  <li><a href="myInfo.html">个人信息 </a></li>
	  <li><a href="">常见问题 </a></li>
	  <li><a href="login.html">退出登录 </a></li>
	</ul>
	<form id="searchBook" onSubmit=" return navigationbeforeSubmit(this) ">
	    <text id="s_b_txt1">二手书回收平台</text>
	    <text id="s_b_txt2">二手书定价查询平台</text>
	    <input id="s_b_input1" name="bookNameAuthor" type="text" placeholder="图书名称、作者">
		<input id="s_b_input2" name="search" type="submit" value="搜索">                   <!-- 搜索功能 -->
	</form>
	<div>
	  <h1>个人信息</h1>
	  <div id=infoButton>         <!-- 这一层是个人信息按钮所在的层，方便与其他层分离放置 -->
	                              <!-- 按下其中一个按钮，则显示该按钮对应层，同时隐藏另外一个层（还没做） -->
	    <input type="button" id="bt1" name="bt1" onclick="clickJBXXbutton()" value="基本信息"></br>
	    <input type="button" id="bt2" name="bt2" onclick="clickXGMMbutton()" value="修改密码">
	  </div>
	  <div id="jbxx">              <!-- 基本信息层 -->  
       <form onSubmit=" return personal_information1_beforeSubmit(this) ">	  
	    <h2>基本信息</h2>
		用户名<input type="text" name="userName" placeholder="图书名称、作者">
		联系电话<input type="text" name="phonenumber" placeholder="电话号码"></br>
		地址<select name="addr1" placeholder="下拉列表"><!--下拉地址列表-->
		<input type="text" name="addr2" placeholder="详细地址"></br>
		<input type="submit" id="bt3" name="bt3" value="保存">
		<input type="button" id="bt4" name="bt4" value="取消">
       </form>		
	  </div>
	  <div id="xgmm">              <!-- 修改密码层 --><!--需要和基本信息层独立-->
	   <form onSubmit=" return passwordchangebeforeSubmit(this) "> 
		<h2>修改密码</h2>
		新密码<input type="text" name="newPassword" placeholder="密码"></br>
		确认密码<input type="text" name="confirmPassword" placeholder="确认密码"></br>
		<input type="submit" id="bt5" name="bt5" value="保存">
		<input type="button" id="bt6" name="bt6" value="取消">		  
       </form>	
	  </div>
	</div>
  </body>
</html>